<template>
  <div>
    <div align="right">
      <el-input v-model="search"
                placeholder="请输入查询内容"
                style="width: 200px"
                @blur="searchfor"></el-input>
    </div>
  <el-table
      :data="tableData"
      border
      style="width: 100%">
    <el-table-column
        fixed
        label="设备类型id"
        prop="id"
        width="150">
    </el-table-column>

    <el-table-column
        label="类型名称"
        prop="typename"
        width="120">
    </el-table-column>

    <el-table-column
        label="简介"
        prop="description">
    </el-table-column>

    <el-table-column label="操作" width="150">
      <template slot-scope="scope">
        <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">修改
        </el-button>
        <el-button
            v-if="scope.row.id>1"
            size="mini"
            type="danger" @click="handleDelete(scope.$index, scope.row)">删除
        </el-button>
      </template>
    </el-table-column>

  </el-table>

  <el-pagination
      :page-size="pageSize"
      :total="total"
      background
      layout="prev, pager, next"
      @current-change="page">
  </el-pagination>
  </div>
</template>

<script>
export default {
  created() {
    this.getTableData();
  },
  methods: {
    page(currentPage) {
      this.currentPage=currentPage;
      this.getTableData();
    },
    handleEdit(index, row) {
      this.$router.push({
        path:'/equipmenttypeupdate',
        query:{
          id:row.id,
        }
      })
    },
    handleDelete(index, row) {
      axios.get('http://localhost:8081/equipmenttype/checkproducttyoe/' + row.id).then(
          (response) => {
            if(response.data == ""){
              axios.get('http://localhost:8081/equipmenttype/deleteById/' + row.id).then(
                  (response) => {
                    if(response.data == "success"){
                      this.success();
                      this.getTableData();
                    }else{
                      this.failed();
                    }
                  })
            }else{
              this.$confirm('该类型已与设备有关联，是否继续删除?', '删除', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                axios.get('http://localhost:8081/equipmenttype/deleteById/' + row.id).then(
                    (response) => {
                      if(response.data == "success"){
                        this.getTableData();
                        this.success();
                      }else{
                        this.failed();
                      }
                    })
              }).catch(() => {
                //什么也不做
              });
            }
          })

    },
    success() {
      this.$message({
        message: '修改成功!',
        type: 'success'
      });
    },
    failed() {
      this.$message.error('修改失败!');
    },
    getTableData(){
      if(this.search!=null && this.search!=""){
        axios.get('http://localhost:8081/equipmenttype/search/1'+'/'+this.pageSize+"/"+this.search).then(
            (response) => {
              this.tableData = response.data.content;
              this.total = response.data.totalElements;
            }
        );
      }else if(this.currentPage != 1){
        axios.get('http://localhost:8081/equipmenttype/findAll/+' + this.currentPage + '/' + this.pageSize).then(
            (response) => {
              this.tableData = response.data.content;
              this.total = response.data.totalElements;
            }
        )
      }else{
        axios.get('http://localhost:8081/equipmenttype/findAll/1/' + this.pageSize).then(
            (response) => {
              this.tableData = response.data.content;
              this.total = response.data.totalElements;
            }
        )
      }
    },
    searchfor(){
      this.currentPage=1;
      this.getTableData();
    },

  },

  data() {
    return {
      pageSize: 14,
      total: null,
      tableData: null,
      search:null,
      currentPage:1,
    }
  }
}
</script>